<template>
    <div>
        <el-breadcrumb separator-class="el-icon-arrow-right">
<!--            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>-->
            <el-breadcrumb-item>零售订单</el-breadcrumb-item>
            <el-breadcrumb-item>经销商版</el-breadcrumb-item>
        </el-breadcrumb>
        <h1 style="text-align: center">零售表</h1>
    <el-table
            :data="tableData"
            stripe
            border
            :default-sort = "{prop: 'orderNo ', order: 'descending'}"
            style="width: 100%">
        <el-table-column type="expand">
            <template slot-scope="props">
                <el-form label-position="left" inline class="demo-table-expand">
                    <el-form-item label="订单名称" >
                        <span>{{ props.row.orderName }}</span>
                    </el-form-item>
                    <el-form-item label="所属店铺">
                        <span>{{ props.row.onlineStore }}</span>
                    </el-form-item>
                    <el-form-item label="商品 ID">
                        <span>{{ props.row.orderNo }}</span>
                    </el-form-item>
                    <el-form-item label="订单日期">
                        <span>{{ props.row.orderCreateDate }}</span>
                    </el-form-item>
                    <el-form-item label="支付方式">
                        <span>{{ props.row.payWay }}</span>
                    </el-form-item>
                    <el-form-item label="买家姓名">
                        <span>{{ props.row.buyerName}}</span>
                    </el-form-item>
                    <el-form-item label="买家地址">
                        <span>{{ props.row.buyerProvince }}{{ props.row.buyerCity }}{{ props.row.buyerArea }}</span>
                    </el-form-item>
                    <el-form-item label="买家留言">
                        <span>{{ props.row.buyerMessage }}</span>
                    </el-form-item>
                </el-form>
            </template>
        </el-table-column>
        <el-table-column
                label="商品ID"
                prop="orderNo">
        </el-table-column>
        <el-table-column
                label="订单名称"
                prop="orderName">
        </el-table-column>
        <el-table-column
                label="订单状态"
                prop="orderStatus">
        </el-table-column>
        <el-table-column
                fixed="right"
                label="操作"
                width="120">
            <template slot-scope="scope">
                <el-button
                        @click.native.prevent="deleteRow(scope.$index, tableData)"
                        type="text"
                        size="small">
                    移除
                </el-button>
            </template>
        </el-table-column>
    </el-table>
        <el-pagination
                background
                layout="prev, pager, next"
                :page-size="5"
                :total="10"
        >
        </el-pagination>
    </div>
</template>

<style>
    .demo-table-expand {
        font-size: 0;
    }
    .demo-table-expand label {
        width: 100px;
        color: #E6A23C;
    }
    .demo-table-expand {
        margin-right: 0;
        margin-bottom: 0;
        width: 50%;
    }
</style>

<script>
    export default {
        data() {
            return {
                tableData: [{
                    orderNo: '12987121',
                    orderName: '小米彩电',
                    orderStatus: '已支付',
                    onlineStore: '小米官方旗舰店',
                    orderCreateDate:"2020-12-28",
                    payWay:"支付宝",
                    buyerProvince:"成都市",
                    buyerCity:"四川省",
                    buyerArea: '双流区',
                    buyerMessage: '请尽快发货'
                }, {
                    orderNo: '12987122',
                    orderName: '花花公子羽绒服',
                    orderStatus: '已支付',
                    onlineStore: '花花公子官方旗舰店',
                    orderCreateDate:"2020-12-30",
                    payWay:"微信",
                    buyerProvince:"北京市",
                    buyerCity:"北京市",
                    buyerArea: '朝阳区',
                    buyerMessage: '无'
                }, {
                    orderNo: '12987123',
                    orderName: '百草味饼干',
                    orderStatus: '已支付',
                    onlineStore: '三只松鼠店',
                    orderCreateDate:"2020-12-20",
                    payWay:"支付宝",
                    buyerProvince:"四川省",
                    buyerCity:"成都市",
                    buyerArea: '双流区',
                    buyerMessage: '无'
                }, {
                    orderNo: '12987124',
                    orderName: '九阳豆浆机',
                    orderStatus: '未支付',
                    onlineStore: '九阳天猫店',
                    orderCreateDate:"2021-01-23",
                    payWay:"中国银行",
                    buyerProvince:"四川省",
                    buyerCity:"宜宾市",
                    buyerArea: '翠屏区',
                    buyerMessage: '无',
                }, {
                    orderNo: '12987125',
                    orderName: '华为p40',
                    orderStatus: '已支付',
                    onlineStore: '华为京东店',
                    orderCreateDate:"2021-01-03",
                    payWay:"微信",
                    buyerProvince:"四川省",
                    buyerCity:"绵阳",
                    buyerArea: '清城区',
                    buyerMessage: '无',
                }
                ]
            }
        },
        methods:{
            deleteRow(index, rows) {
                rows.splice(index, 1);
            },
            open1() {
                const h = this.$createElement;
                let aData = new Date();
                this.$notify({
                    title: aData,
                    message: h('i', { style: 'color: teal'})
                });
            }
        }
    }
</script>